<template>
  <div class="register-container">
    <!-- 注册内容 -->
    <div class="register">
      <h3>商家注册界面
        <span class="go">
         <router-link to="/login">返回登陆界面</router-link>
        </span>
      </h3>
      <el-form  :model="userForm" status-icon :rules="rules"  ref="userForm" label-width="80px"  size="mini" label-position="left">
        <el-form-item label="昵称" prop="nickname">
          <el-col :span="8">
          <el-input type="text" v-model="userForm.nickname" autocomplete="off" id="ui"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="登录账号" prop="uname">
          <el-col :span="8">
          <el-input type="text" v-model="userForm.uname" autocomplete="off" id="un"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="登录密码" prop="upwd">
          <el-col :span="8">
          <el-input type="password" v-model="userForm.upwd" autocomplete="off" id="up"></el-input>
        </el-col>
        </el-form-item>
        <el-form-item label="确认密码" prop="upwd1">
          <el-col :span="8">
          <el-input type="password" v-model="userForm.upwd1" id="up1"></el-input>
        </el-col>
        </el-form-item>
        <el-form-item label="手机号" prop="uphone">
          <el-col :span="8">
          <el-input type="text" v-model="userForm.uphone" id="uph"></el-input>
        </el-col>
        </el-form-item>
        <el-form-item label="选择身份" prop="utype">
          <div v-if="(num==1)">
            <el-select v-model="userForm.utype" placeholder="请选择用户身份" id="ut1">
              <el-option label="买家" value="1"></el-option>
            </el-select>
          </div>
          <div v-else>
            <el-select v-model="userForm.utype" placeholder="请选择用户身份" id="ut2">
              <el-option label="卖家" value="0"></el-option>
              <el-option label="买家" value="1"></el-option>
            </el-select>
          </div>
        </el-form-item>
        <el-form-item label="" prop="address">
          <div v-if="(userForm.utype==1)">
              <el-col :span="8">
                默认交易地点：<el-input type="text" v-model="userForm.address" id="uad"></el-input>
            </el-col>
          </div>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="userRegister('userForm')" id="btn">提交注册</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
  
  export default {
    name: 'Register',
    data(){
      var check3 = (rule, value, callback) => {
        if (value==null) {
          callback(new Error('请输入确认密码'));
        } else if (value !== this.userForm.upwd) {
          callback(new Error('两次输入密码不一致!'));
        } else {
          callback();
        }
      };
      return{
        userForm:{
        nickname:'',
        //用户权限
        utype:'1',
        //用户姓名
        uname:'',
        //密码
        upwd:'',
        //确认密码
        upwd1:'',
        //手机号
        uphone:'',
        //默认交易地点
        address:'',
        },
        rules: {
          nickname: [
            { required:true,message:'请输入昵称',trigger: 'blur' },
            { min: 1, max: 12, message: '长度在 1 到 12个字符', trigger: 'blur' },
          ],
          uname: [
            { required:true,message:'请输入登录账号',trigger: 'blur' },
            { min: 4, max: 12, message: '长度在 4 到 12个字符', trigger: 'blur' },
          ],
          upwd: [
            { required:true,message:'请输入登录密码', trigger: 'blur' },
            { min: 4, message: '长度不小于4个字符', trigger: 'blur' },
          ],
          upwd1: [
            { validator: check3, trigger: 'blur'},
            { required:true, message:'请输入确认密码',trigger: 'blur' },
          ],
          uphone:[
            { required:true,message:'请输入手机号', trigger: 'blur'},
            { min: 11, max: 11, message: '长度为11个字符', trigger: 'blur' },
          ],
          utype:[
          { required:true,message:'请选择用户身份',trigger: 'change' }
          ]
        },
        num:''
      }
    },
    methods:{
      async userRegister(userForm){
        if(this.userForm.utype=='0'&&this.num==1){
          alert("已经有商家注册，无法再次注册")
          this.$router.go(0)
        }else{
          let run=0;
         this.$refs[userForm].validate((valid) => {
          if (valid) {
            run=1;
          } else {
            return false;
          }
        });
          if(run==1){
            const {uname,upwd,upwd1,utype,uphone,address,nickname} =this.userForm;
            
              if(utype=='1'){
                const res = await this.$store.dispatch("userRegister",{uname,upwd,uphone,utype,address,nickname})
                  if(res=='fail'){
                    //this.$router.go(0)
                  }else{
                    this.$router.push('/login');
                    this.$router.go(0)
                  }   
              }else{
                const res = await this.$store.dispatch("userRegister",{uname,upwd,uphone,utype,nickname})
                  if(res=='fail'){
                    //this.$router.go(0)
                  }else{
                    this.$router.push('/login');
                    this.$router.go(0)
                  }   
              }
              
          
          }
        }
      },
      getUserNum(){
        this.$axios.get('/api/seller').then(res =>{
                this.num=res.data.num
              }).catch(error =>{
               // console.log('提交失败')
                console.log(error )
              })
      },
    },
    mounted(){
      this.getUserNum()
    }
  }
</script>

<style lang="less" scoped>
  .register-container {
    .register {
      width: 1200px;
      height: 545px;
      border: 1px solid rgb(223, 223, 223);
      margin: 0 auto;

      h3 {
        background: #ececec;
        margin: 0;
        padding: 6px 15px;
        color: #333;
        border-bottom: 1px solid #dfdfdf;
        font-size: 20.04px;
        line-height: 30.06px;

        span {
          font-size: 14px;
          float: right;

          a {
            color: #e1251b;
          }
        }
      }
      
    }
    .el-form-item{
      margin-top: 30px;
      margin-left: 30px;
    }
  }
</style>